<template>
    <headerTitle title="注册"></headerTitle>
    <ul class="form-box">
        <li>
            <div class="title">
                手机号码：
            </div>
            <div class="content">
                <input type="text" placeholder="手机号码" v-model="phoneNumber">
            </div>
        </li>
        <li>
            <div class="title">
                密码：
            </div>
            <div class="content">
                <input type="password" placeholder="密码" v-model="password">
            </div>
        </li>
        <li>
            <div class="title">
                确认密码：
            </div>
            <div class="content">
                <input type="password" placeholder="确认密码" v-model="passwordConfirm">
            </div>
        </li>
        <li>
            <div class="title">
                用户姓名：
            </div>
            <div class="content">
                <input type="text" placeholder="用户姓名" v-model="nickname">
            </div>
        </li>
        <li>
            <div class="title">
                性别：
            </div>
            <div class="content" style="font-size: 3vw;">
                <input type="radio" name="sex" value="0" style="width:6vw;height: 3.2vw;" v-model="sex">男
                <input type="radio" name="sex" value="1" style="width:6vw;height: 3.2vw;" v-model="sex">女
            </div>
        </li>
    </ul>
    <tip :tips="tips"></tip>
    <div class="button-login">
        <button @click="register()">注册</button>
    </div>
    <mainFooter></mainFooter>
</template>

<script setup>
import { ref } from 'vue';
import headerTitle from '@/components/headerTitle.vue';
import tip from '@/components/tipBox.vue';
import mainFooter from '@/components/mainFooter.vue';
import { registerRequest } from '@/js/request';
import { isNotEmptyStr } from '@/js/util'
import { useRouter } from 'vue-router';
let router = useRouter()
let tips = ref(null)
let phoneNumber = ref(null)
let password = ref(null)
let passwordConfirm = ref()
let nickname = ref(null)
let sex = ref(0)
function register() {
    if (isNotEmptyStr(phoneNumber.value) && isNotEmptyStr(password.value) && isNotEmptyStr(passwordConfirm.value) && isNotEmptyStr(nickname.value)) {
        if (password.value == passwordConfirm.value) {
            registerRequest((respon) => {
                switch(respon.data.code){
                    case 200: router.push({ name: 'loginPage' });break
                    case 501: tips.value="手机号格式不正确";break
                    case 502: tips.value="该手机号已被注册";break
                }
            }, phoneNumber.value, password.value, nickname.value, sex.value)
        }else{
            tips.value="两次输入的密码不一致"
        }
    }else{
        tips.value="请完整的输入信息"
    }

}
</script>

<style lang="scss" scoped>

.form-box {
    width: 100%;
    margin-top: 12vw;
}

.form-box li {
    box-sizing: border-box;
    padding: 4vw 3vw 0 3vw;
    display: flex;
    align-items: center;
}

.form-box li .title {
    flex: 0 0 18vw;
    font-size: 3vw;
    font-weight: 700;
    color: #666;
}

.form-box li .content {
    flex: 1;
}

.form-box li .content input {
    border: none;
    outline: none;
    width: 100%;
    height: 4vw;
    font-size: 3vw;
}

.button-login {
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    padding: 4vw 3vw 0 3vw;
    display: flex;
}

.button-login button {
    width: 100%;
    height: 10vw;
    font-size: 3.8vw;
    font-weight: 700;
    color: #fff;
    background-color: #38CA73;
    border-radius: 4px;

    border: none;
    outline: none;
}

.button-register {
    width: 100%;
    box-sizing: border-box;
    padding: 4vw 3vw 0 3vw;
}

.button-register button {
    width: 100%;
    height: 10vw;
    font-size: 3.8vw;
    font-weight: 700;
    color: #666;
    background-color: #EEE;
    border-radius: 4px;

    border: none;
    outline: none;
    border: solid 1px #DDD;
}
</style>